<template>
    <!--为echarts准备一个具备大小的容器dom-->
    <div id="main" style="width: 1500px;height: 700px;"></div>
</template>
<script>
    import echarts from 'echarts'
    export default {
        name: 'PaperCategory（top5）',
        data () {
            return {
                charts: '',
                opinion:['android','后端','人工智能','ios','python','数据库'],
                opinionData:[
                    {value:300010, name:'android'},
                    {value:100549, name:'后端'},
                    {value:325786, name:'人工智能'},
                    {value:383414, name:'ios'},
                    {value:935124, name:'python'},
                    {value:687254, name:'数据库'}
                ]
            }
        },
        methods:{
            drawPie(id){
                this.charts = echarts.init(document.getElementById(id))
                this.charts.setOption({
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a}<br/>{b}:{c} ({d}%)'
                    },
                    legend: {
                        orient: 'vertical',
                        x: 'left',
                        data:this.opinion,
                    },
                    series: [
                        {
                            name:'访问来源',
                            type:'pie',
                            radius:['50%','70%'],
                            avoidLabelOverlap: false,
                            label: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '50',
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data:this.opinionData
                        }
                    ]
                })
            }
        },
        //调用
        mounted(){
            this.$nextTick(function() {
                this.drawPie('main')
            })
        }
    }
</script>
<style scoped>
    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }
</style>
